<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增商品积分')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-pointsGoods-add">
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">名称：</label>
                <div class="col-sm-8">
                    <input name="name" class="form-control" type="text" required>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">兑换积分：</label>
                <div class="col-sm-8">
                    <input name="points" class="form-control" type="text" required>
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">图片：</label>
                <div class="col-sm-8">
                    <button type="button" class="btn btn-primary" id="showPictures">查看图片</button>
                    <input type="file" id="uploadPicture" accept="image/*" style="display: inline-block;  margin-left: 10px;">
                    <input name="pictures" class="form-control" type="hidden">
                </div>
            </div>
        </div>
        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">说明：</label>
                <div class="col-sm-8">
                    <textarea name="statement" class="form-control" type="text"></textarea>
                </div>
            </div>
        </div>
        <!-- ... existing code ... -->
    </form>
</div>

<!-- 图片弹窗 -->
<div id="pictureModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">图片预览</h4>
            </div>
            <div class="modal-body">
                <img id="picturePreview" src="" class="img-responsive" alt="图片预览">
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
    var prefix = ctx + "points/pointsGoods";
    $("#form-pointsGoods-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-pointsGoods-add').serialize());
        }
    }

    $("input[name='shelveTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    // 处理文件上传事件
    $('#uploadPicture').on('change', function(e) {
        var file = e.target.files[0];
        if (file) {
            // 校验图片名称是否包含空格
            if (/\s/.test(file.name)) {
                alert('图片名称不能包含空格，请重新选择图片。');
                // 清空文件选择
                $(this).val('');
                return;
            }
            var formData = new FormData();
            formData.append('file', file);

            $.ajax({
                url: ctx + 'common/upload',
                type: 'post',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function(result) {
                    if (result.url) {
                        // 将上传后的图片 URL 放入 pictures 输入框
                        $('input[name="pictures"]').val(result.url);
                        alert('图片上传成功');
                    } else {
                        alert('图片上传失败，未返回有效 URL');
                    }
                },
                error: function() {
                    alert('图片上传失败，请稍后重试');
                }
            });
        }
    });

    // 处理查看图片按钮点击事件
    $('#showPictures').on('click', function() {
        var pictureUrl = $('input[name="pictures"]').val();
        if (pictureUrl) {
            var $previewImg = $('#picturePreview');
            $previewImg.attr('src', pictureUrl);

            // 监听图片加载完成事件
            $previewImg.on('load', function() {
                var imgWidth = this.naturalWidth;
                var imgHeight = this.naturalHeight;

                // 设置弹窗的最大宽度和高度
                var maxWidth = $(window).width() * 0.9;
                var maxHeight = $(window).height() * 0.9;

                // 计算合适的宽高
                var ratio = Math.min(maxWidth / imgWidth, maxHeight / imgHeight);
                var newWidth = imgWidth * ratio;
                var newHeight = imgHeight * ratio;

                // 设置弹窗和图片的宽高
                $('#pictureModal .modal-dialog').css({
                    'width': newWidth + 'px',
                    'max-width': 'none'
                });
                $previewImg.css({
                    'width': newWidth + 'px',
                    'height': newHeight + 'px'
                });

                // 显示弹窗
                $('#pictureModal').modal('show');
            });
        } else {
            alert('暂无图片信息');
        }
    });
</script>
</body>
</html>
